<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./static/jquery.min.js"></script>
    <style>
        .container {
            width: 100%;
            height: 100%;
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            padding-top: 50px;
        }

        .img-container {
            padding: 10px;
            background: white;
        }

        .img-container img {
            width: 177px;
            height: 248px;
        }

        .time {
            margin-top: 15px;
            color: #555;
            display: none;
        }

        .error {
            margin-top: 15px;
            color: red;
            display: none;
        }

        .doc {
            font-size: 25px;
            text-decoration: none;
            cursor: pointer;
            color: #1891f0;
        }

        html, body {
            background: #ddd;
        }

        .kuai {
            width: 40px;
            height: 40px;
            display: inline-block;
        }

        .kuai.white {
            background: white;
        }

        .kuai.blue {
            background: blue;
        }

        .kuai.red {
            background: red;
        }
    </style>
</head>
<body>
<div style="text-align: right;padding: 30px 30px 0 0">
    <a class="doc" href="https://easydoc.net/doc/94939509/GiY66jTI/njpEiuHC" target="_blank">文档</a>
</div>
<div class="container">
    <div class="img-container">
        <img src="./static/asset/people.png" alt="" srcset="" class="img btn">
    </div>
    <div class="time"></div>
    <div class="error">123</div>
    <div style="margin-top: 20px">
        背景：
        <label><input name="color" type="radio" value="white" checked/>
            <div class="kuai white"></div>
        </label>
        <label><input name="color" type="radio" value="red"/>
            <div class="kuai red"></div>
        </label>
        <label><input name="color" type="radio" value="blue"/>
            <div class="kuai blue"></div>
        </label>
    </div>
    <div style="margin-top: 20px">
        处理模式：
        <label><input name="solve_type" type="radio" value="quality" checked/>
            质量
        </label>
        <label><input name="solve_type" type="radio" value="speed"/>
            速度
        </label>
    </div>
    <input type="file" name="" id="" class="file" style="display: none">
</div>
<script>
    var form
    $('.btn').click(function () {
        $('.file').click();
        $('.error').hide();
        $('.time').hide();
    })
    $('.file').change(function (e) {
        var file = e.target.files[0];
        form = new FormData();
        var color = $('input[name="color"]:checked').val();
        var solve_type = $('input[name="solve_type"]:checked').val();
        form.append("crop_file", file, "crop_file.jpg");
        form.append("color", color);
        form.append("solve_type", solve_type);
        let reader = new FileReader();
        reader.readAsDataURL(e.target.files[0]);
        reader.onload = function (r) {
            $('.img').attr('src', r.target.result);
        }
        upload();
    })
    $('input[name="color"]').change(function () {
        if ($('.file')[0].files.length > 0) {
            form = new FormData();
            var color = $('input[name="color"]:checked').val();
            var solve_type = $('input[name="solve_type"]:checked').val();
            form.append("crop_file", $('.file')[0].files[0], "crop_file.jpg");
            form.append("color", color);
            form.append("solve_type", solve_type);
            upload();
        }
    })

    function upload() {
        let myTime = new Date();
        $('.time').text('上传中.....').show()
        $.ajax({
            url: '/upload',
            type: 'POST',
            data: form,
            processData: false,
            contentType: false,
            success: function (data) {
                $('.img').attr('src', data.url);
            },
            error: function (data) {
                let mydata = JSON.parse(data.responseText);
                $('.error').text(mydata.msg)
                $('.error').show()
            },
            complete: function (data) {
                let newTime = new Date();
                let time = newTime.getTime() - myTime.getTime();
                $('.time').text(`操作完成，耗时${time}ms`).show()
            }
        });
    }
</script>
</body>
</html>
